/**
 * 编辑发票的更多信息
 */
import React  from 'react'
import { messages, getApprovelHistory } from 'share/common'
import { Icon, Form, Input } from 'antd'
const FormItem = Form.Item;
import Condition from 'components/condition'
const { If, Else } = Condition;

class InvoiceMoreInfoEdit extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      showMore: false,
      moreInfoValues: props.moreInfo,
    }
  }

  handleChange = (key, value, isMoreInfo) => {
    let { moreInfoValues } = this.state;
    if (isMoreInfo) {
      moreInfoValues[key] = value;
      this.setState({ moreInfoValues });
      this.props.onChange(isMoreInfo, moreInfoValues)
    } else {
      this.props.onChange(isMoreInfo, {[key]: value})
    }
  };

  //渲染【销售方名称、销售方纳税人识别号、购买方名称、购买方纳税人识别号】
  //以上信息不存在more_info字段，但是需要在更多信息中显示并可编辑
  //只要有其中一个有值，则四个文本框都需显示
  renderPayeeInfo = () => {
    const { getFieldDecorator } = this.props.form;
    const { invoiceInfo } = this.props;
    const formItemLayout = {
      labelCol: {span: 8},
      wrapperCol: {span: 10, offset: 1},
    };
    const types = {
      'payee': messages('my-account.key250')/*销售方名称*/,
      'payeeNo': messages('my-account.key251')/*销售方纳税人识别号*/,
      'title': messages('my-account.key252')/*购买方名称*/,
      'draweeNo': messages('my-account.key253')/*购买方纳税人识别号*/
    };
    let isNeedShow = false;
    Object.keys(types).map(key => {
      if (invoiceInfo[key]) {
        isNeedShow = true
      }
    });
    if (isNeedShow) {
      return (
        Object.keys(types).map(key => (
          <FormItem label={types[key]} {...formItemLayout}>
            {getFieldDecorator(key, {
              initialValue: invoiceInfo[key]
            })(
              <Input onChange={e => this.handleChange(key, e.target.value, false)}/>
            )}
          </FormItem>
        ))
      )
    }
  };

  render(){
    const { getFieldDecorator } = this.props.form;
    const { moreInfoLabel } = this.props;
    const { showMore, moreInfoValues } = this.state;
    const formItemLayout = {
      labelCol: {span: 8},
      wrapperCol: {span: 10, offset: 1},
    };
    return (
      <div className="invoice-more-info-edit">
        <Condition>
          <If value={showMore}>
            {this.renderPayeeInfo()}
            {Object.keys(moreInfoValues).map(key => (
              <FormItem label={moreInfoLabel[key] || " "} {...formItemLayout}>
                {getFieldDecorator(key, {
                  initialValue: moreInfoValues[key]
                })(
                  <Input onChange={e => this.handleChange(key, e.target.value, true)}/>
                )}
              </FormItem>
            ))}
            <div className="more-info-title">
              <a onClick={() => this.setState({ showMore: false })}><Icon type="up"/> {messages('my-account.key254')/*更多信息*/}</a>
            </div>
          </If>
          <Else>
            <div className="more-info-title">
              <a onClick={() => this.setState({ showMore: true })}><Icon type="down"/> {messages('my-account.key254')/*更多信息*/}</a>
            </div>
          </Else>
        </Condition>
      </div>
    )
  }
}

InvoiceMoreInfoEdit.propTypes = {
  invoiceInfo: React.PropTypes.object,
  moreInfo: React.PropTypes.object,
  moreInfoLabel: React.PropTypes.object,
  onChange: React.PropTypes.func,
};

export default Form.create()(InvoiceMoreInfoEdit);
